<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上传图片</title>
    <link rel="stylesheet" href="http://localhost:3000/file/bootstrap">
    <script src="https://vuejs.org/js/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <style>
        
        .form{
            width:20%;
            display: flex;
            margin: 10px auto;
        }
        #file{
            /* width: 100px; */
            margin: 10px 0;
        }
        .imgs{
            width: 70%;
            margin: 0 auto;
        }
        .img{
            width: 25%;
            height: 230px;
        }
    </style>
</head>
<body>
    <div id="el">
        <!-- 上传图片 -->
            <!-- <form action="http://localhost:3000/file/upload" method="POST" 
            enctype="multipart/form-data"  class="form"> -->
        <h1 style="text-align:center">看我如何上传图片</h1>
        <div class="form">
                <input type="file" name="file" id="file" ref="inputer">
                <input type="submit" class="btn bt" @click="upload">
        </div>
            
        <!-- </form> -->
        <div class="imgs">
            <a href="#" class="thumbnail img" style="float:left" v-for="(item,index) in imgs" :key="index">
                <img :src="'http://localhost:3000/file/imgs/'+item" style="height:100%;width:100%">
            </a>
        </div>
    </div>
    
    <script>
        new Vue({
            el:'#el',
            data:{
                imgs:[]
            },
            methods: {
                upload:function () {
                    console.log('post');
                    let inputDOM = this.$refs.inputer;
                    // 通过DOM取文件数据
                    this.file    = inputDOM.files[0];
                    var formdata = new FormData();
                    formdata.append('file',inputDOM.files[0]);
                    let config = {
                        headers:{'Content-Type':'multipart/form-data'}
                        };
                    this.$http.post('http://localhost:3000/file/upload',formdata,config).then(function (re) {
                        console.log(re);
                        })
                        .catch(function (err) {
                            console.log(err);
                        })
                    window.location.reload();
                },
            }
            ,
            created () {
                this.$http.get('http://localhost:3000/file/getimglist').then(function(res){
                    this.imgs=res.body.filename;
                })
            }
        })
    </script>
</body>
</html>